<template>
	<view>
		<view class="s-head">
			<uni-card :title="city" :is-shadow="true" :extra="extra" shadow="true">
				<view>
					<text class="text">{{observe.degree}}℃</text>
				</view>
				<view>
					<img style="width: 48px;height: 48px;" src="https://yo.docshare.org.cn/static/baidu/yin.png">
					<text class="text">{{observe.weather}}</text>
				</view>
				<!-- <view>
					<text class="text">{{observe.wind_direction}}风{{observe.wind_power}}级</text>
				</view> -->


			</uni-card>
		</view>
		<view class="content">

			<template v-for="(item,index) in tips">
				<text>{{item}}</text>
			</template>


		</view>


		<view class="uni-padding-wrap uni-common-mt">
			<text>24小时预报</text>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view v-for="item in forecast_1h" class="scroll-view-item_H">
					<view>{{item.update_time.substring(8,10)}}时</view>
					<view><img style="width: 48px;height: 48px;" :src="item.weather|getWeaterIcon"></view>
					<view>{{item.degree}}℃</view>
				</view>
			</scroll-view>
		</view>

		<view class="seven-weather">
			<text>7天预报</text>
			<view class="">
				<uni-grid :column="7" :show-border="false" :square="false">
					<template v-for="(item,index) in forecast_24h">
						<uni-grid-item class="s-item" :key="index">
							<text class="text">{{item.time.substring(6)}}</text>
							<img style="width: 48px;height: 48px;" :src="item.weather|getWeaterIcon">
						</uni-grid-item>
					</template>
				</uni-grid>
			</view>
			<view class="">
				<uni-grid :column="7" :show-border="false" :square="false">
					<template v-for="(item,index) in forecast_24h">
						<uni-grid-item class="s-item">
							<text class="text">{{item.day_wind_direction}}</text>
							<text class="text">{{item.day_wind_power}}级</text>
						</uni-grid-item>
					</template>
				</uni-grid>

			</view>
		</view>
	</view>

</template>

<script>
	import config from '@/config'
	import uniCard from '@/components/uni-card/uni-card.vue'
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import QQMapWX from '@/common/js/qqmap-wx-jssdk.js';
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	var _self;
	var canvaLineA = null;

	export default {
		components: {
			uniGrid,
			uniGridItem,
			uniCard
		},
		filters: {
			getWeaterIcon(value) {
				var icon = '';
				switch (value) {
					case '多云':
						icon = `${config.staticUrl}/static/baidu/yun.png`;
						break;
					case '阴':
						icon = `${config.staticUrl}/static/baidu/yin.png`;
						break;
					case '晴':
						icon = `${config.staticUrl}/static/baidu/qing.png`;
						break;
					case '雷阵雨':
						icon = `${config.staticUrl}/static/baidu/leizhenyu.png`;
						break;
					case '小雨':
						icon = `${config.staticUrl}/static/baidu/leizhenyu.png`;
						break;
					case '中雨"':
						icon = `${config.staticUrl}/static/baidu/yu2.png`;
						break;
					case '雾':
						icon = `${config.staticUrl}/static/baidu/wu.png`;
						break;
					case '雪':
						icon = `${config.staticUrl}/static/baidu/xue.png`;
						break;
					case '沙尘':
						icon = `${config.staticUrl}/static/baidu/shachen.png`;
						break;
					default:
						icon = `${config.staticUrl}/static/baidu/qing.png`;
						break;
						break;
				}
				return icon;
			},
		},
		data() {
			return {
				list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				province: '江西省',
				city: '南昌市',
				extra: '刚刚更新',
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				observe: {},
				forecast_1h: [],
				forecast_24h: [],
				tips: [],
			}
		},
		onLoad() {
			var that = this;
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.listenerBtnGetLocation();
		},
		methods: {
			 listenerBtnGetLocation: function () {
			    // 实例化腾讯地图API核心类
				var qqmapsdk;
			    qqmapsdk = new QQMapWX({
			      key: 'LTLBZ-OGFK5-EQXIR-QDEDQ-ZQJR7-UJBVB' // 必填
			    });
			    var that = this
			    var regionWX=[];
			    wx.getLocation({
			      type: 'wgs84',
			      success: function (res) {
			        //2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
			        qqmapsdk.reverseGeocoder({
			          success: function (res) {
			            that.province = res.result.address_component.province;
			            that.city = res.result.address_component.city;
			            that.district = res.result.address_component.district;
							that.getServerData();
			          },
			          fail: function (res) {
			            console.log(res);
						that.getServerData();
			          },
			          complete: function (res) {
			            console.log(res);
			          }
			        })
			
			      },
			      fail: function (err) {
			        that.setData({
			          region: ['广东省', '广州市', '海珠区']
			        })
			        console.log(err)
			      },
			      complete: function (info) {
			        console.log(info)
			      }
			    })
			  },
			getServerData() {
				var that = this;
				uni.request({
					url: `https://wis.qq.com/weather/common`,
					data: {
						source: 'pc',
						weather_type: 'forecast_1h|observe|tips|forecast_24h',
						province: this.province,
						city: this.city
					},
					success: function(res) {
						that.forecast_1h = res.data.data.forecast_1h;
						that.observe = res.data.data.observe;
						that.tips = res.data.data.tips.observe;
						delete res.data.data.forecast_24h[0]
						that.forecast_24h = res.data.data.forecast_24h;

					},
					fail: () => {
						_self.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
		}
	};
</script>

<style>
	.s-head {}

	.content {
		margin: 12px;
	}

	.uni-padding-wrap {
		margin: 12px;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
		height: 300 upx;
		line-height: 300 upx;
		text-align: center;
		font-size: 36 upx;
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.seven-weather {
		margin: 12px;
	}

	/**让图表和上面的文字对齐*/
	canvas {
		left: -12px;
	}
</style>
